<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <!--
        引入axios核心js文件
    -->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    {{name}}
    <button @click="send()">发起请求</button>
    <div>{{result}}</div>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三",
            age:18,
            result:""
        },
        methods:{
            send(){
                /*
               *   当前页面访问地址:
               *       http://localhost:8080/04_Vue异步请求/01-axios异步操作.html
               *   目标Servlet访问地址
               *       http://localhost:8080/AjaxServlet
               * */
                let url = "../AjaxServlet"
                let param = "name="+this.name+"&age="+this.age
                axios.post(url,param).then(response=>{
                    this.result = response.data
                })

            }
        }
    });
</script>
</html>